<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>绑定样式</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .basic{
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }
            .happy{
                border: 4px solid red;
                background-color: orange;
                background: linear-gradient(30deg,yellow,pink,orange,yellow);
            }
            .sad{
                border: 4px solid green;
                background-color: gray;
                background: linear-gradient(30deg,black,pink,gray,blue);
            }
            .normal{
                border: 4px solid yellow;
                background-color: ghostwhite;
            }
            .at1{
                background-color: orange;
            }
            .at2{
                font-size: 50px;
            }
            .at3{
                border-radius: 15px;
            }
        </style>
    </head>
    <body>

    
        <div id ="root">
        <!--第一种：绑定class样式--字符串写法 适用于：样式的类名不确定，需要动态指定
            不变的样式使用class，可以改变的样式绑定class -->
        <div class="basic" :class="mood" id = "demo" @click="changeMood">{{name}}</div><br/><br/>

        <!-- 第二种：绑定class样式--数组写法 适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr" @click="delArr">{{name}}</div><br/><br/>

        <!-- 第三种：绑定class样式--对象写法 适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj" @click="changeObj">{{name}}</div><br/><br/>

        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">内联样式对象写法</div><br/><br/>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="[styleObj,styleObj2]">内敛样式数组对象写法</div><br/><br/>
        <div class="basic" :style="styleArr">内敛样式数组写法</div><br/><br/>
        </div>

        <script type="text/javascript">
            let a = 1 
            Vue.config.productionTip = false
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'张三',
                    mood:'normal',
                    classArr:['at1','at2','at3'],
                    classObj:{ //注意：样式对象的属性名要和class类名对应
                        at1:false,
                        at2:false
                    },
                    styleObj:{ //对象写法：注意：属性名对应的样式 fontSize--font-size backgoundColor--background-color
                        fontSize:'30px',
                        backgroundColor:'red'
                    },
                    styleObj2:{ 
                        color:'yellow'
                    },
                    styleArr:[
                        { 
                            fontSize:'30px',
                            backgroundColor:'red'
                        },
                        { 
                            color:'yellow'
                        }
                    ]
                },
                methods: {
                    //实现点击切换样式
                    changeMood(){
                        //直接操作DOM元素，没有了使用Vue的意义
                        //document.getElementById("demo").className='basic happy'
                        //通过改变绑定class的值来修改样式
                        //this.mood = 'happy'
                        const arr = ['happy','sad','normal']  //通过随机生成下标 0 1 2来获取
                        const index = Math.floor(Math.random()*3) // random生成[0-1)的随机数：0.1 0.2...0.9  *3 最小是0.1*3=0.3，最大是0.9*3=2.7，然后向下取整
                        this.mood = arr[index]
                    },
                    delArr(){
                        this.classArr.shift() //移除第一个元素
                    },
                    changeObj(){
                        if(!this.classObj.at1){
                            this.classObj.at1 = true
                            return
                        }
                        if(!this.classObj.at2){
                            this.classObj.at2 = true
                        }
                    }
                },
                
            })
           
        </script>

        
    </body>
</html>